<template>
    <div class="check-order-status">
        <ItemDetail :show.sync="showModal" :value="item" title="Edit Item" :id="itemID" @submit="confirmSubmit" :action="action" :height="600"></ItemDetail>
        <div class="row">
            <div class="col-md-12">
                <item-table title="Order List"  :total="data.length" :columns="defaultColumns" :data="data" :loading="tableLoading"
                            @sort="sort" isColumns :model="model">
                    <template slot="status" slot-scope="props">
                        <select @change="onSelect($event, props)" class="form-control" style="width: 120px;">
                            <option selected v-show="false"></option>
                            <option :key="'option' + index" :value="option.value" v-for="(option, index) in genOption(props)">{{option.label}}</option>
                        </select>
                    </template>
                    <template slot="actions" slot-scope="props">
                        <button type="button" class="btn btn-info btn-outline btn-circle btn-md m-r-5" @click="_editItem(props)">
                            <i class="fif fif-edit"></i>
                        </button>
                        <button type="button" class="btn btn-danger btn-outline btn-circle btn-md m-r-5" @click="_deleteItem(props)">
                            <i class="fif fif-delete"></i>
                        </button>
                    </template>
                </item-table>
            </div>
        </div>
    </div>
</template>

<script>
    // components
    import vSelect from 'vue-select'
    import ItemTable from '@/components/widgets/ItemTable'
    import ItemDetail from '@/components/widgets/ItemDetail'
    //api
    import {updateModel} from '@/api/model'
    import {queryReviewOrder} from '@/api/notification'
    // utlis
    import {toJsonData} from '@/utils'
    // mixin
    import {lifeHookMixin, itemMixin} from '@/mixins/item'
    // config
    import columns from '@/config/columns'

    export default {
        name: "Order",
        components: {vSelect, ItemTable, ItemDetail},
        mixins: [lifeHookMixin, itemMixin],
        created() {
            this.defaultColumns = columns['StatusOrder']
        },
        data() {
            return {

            }
        },
        methods: {
            fetch() {
                if (!this.tableLoading) {
                    this.tableLoading = true
                    queryReviewOrder().then( res => {
                        this.table = res.data
                        this.data = toJsonData(this.table.headers, this.table.data)
                        this.total = res.data.page.total
                        this.tableLoading = false
                }).catch(e => {
                        this.tableLoading = false
                })
                }
            },
            _editItem(props) {
                this.model = 'Order'
                this.editItem(props)
            },
            _deleteItem(props) {
                this.model = 'Order'
                this.deleteItem(props)
            },
            genOption(props) {
                if (props.item.status === 'CANCEL_PRE') {
                    return [
                        {label: 'SPECIAL', value: 0},
                        {label: 'FREE', value: 1},
                    ]
                } else {
                    return [
                        {label: 'NORMAL', value: 2},
                    ]
                }
            },
            onSelect(ele, props) {
                let status = ''
                if (ele.target.value == 0) {
                    status = 'SPECIAL' // 收钱
                } else if (ele.target.value == 1) {
                    status = 'FREE' // 不收钱
                } else if (ele.target.value == 2) {
                    status = 'NORMAL' // 审核通过
                }
                this.tableLoading = true
                updateModel('Order', props.item.id, {
                    status
                }).then(res => {
                    this.data = []
                    this.tableLoading = false
                    this.$nextTick( () => {
                        this.fetch()
                    })
                }).catch (e => {
                    this.tableLoading = false
                })
            },
        },
    }
</script>

<style scoped>

</style>